<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%
String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/pages/login/common.jsp" %>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="B2B电商平台" name="description"/>
<meta content="B2B电商平台" name="keyword"/>

<title>B2B电商平台.运费模板</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/btn.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/themes.css" />
<link rel="stylesheet" href="<%=path%>/include/JQuery zTree v3.4/css/demo.css">
<link rel="stylesheet" href="<%=path%>/include/JQuery zTree v3.4/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/register_icss.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/sweetalert/sweetalert.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/mmt_trading.css" />
<link rel="stylesheet" href="<%=path %>/include/JQuery ui/select2/css/select2.min.css" type="text/css"></link>

<script type="text/javascript" src="<%=path %>/include/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/icss.common.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/icss.shop.apply.js"></script>
<script type="text/javascript" src="<%=path %>/include/js/cookies.js"></script>

<script type="text/javascript" src="<%=path%>/include/JQuery zTree v3.4/js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="<%=path%>/include/JQuery zTree v3.4/js/jquery.ztree.excheck-3.4.js"></script>

<script type="text/javascript" src="<%=path%>/include/pagination/jquery.pagination.js"></script>
<script type="text/javascript" src="<%=path%>/include/pagination/init.js"></script>
<script type="text/javascript" src="<%=path%>/include/js/doT.min.js"></script>
<script type="text/javascript" src="<%=path %>/include/JQuery ui/select2/js/select2.min.js"></script>

	<link rel="stylesheet" href="<%=path%>/include/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="<%=path %>/include/layui/lay/dest/layui.all.js" charset="utf-8"></script>
	
<style type="text/css">
body{}
table{border-collapse: collapse;}
.tr_css{ 
    display:block; /*将tr设置为块体元素*/ 
    margin:10px;  /*设置tr间距为2px*/ 
    line-height: 30px;
}
.td2{height:30px; line-height:30px;}
.td1{
	width:100px;
	font-size:14px;
	text-align:right;
	vertical-align: middle;
}
#btnDiv a:hover{
   color:white;
}
button{
    width:44px;
    height:24px;
    line-height:24px;   
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 -203px;
    border:0;
    cursor:pointer;
    font: 12px/1.5 arial,tahoma,\5b8b\4f53;
    margin: 0 0 0 5px;
    outline:none;
    background-image: url('<%=path%>/include/css/img/xs_bgx.png');   
}
.input1{
	width:200px;
	height:30px;
	line-height:30px;
	vertical-align:middle;
	float:left;
}
.input2{
	width:100%;
	height:30px;
	line-height:30px;
	vertical-align:middle;
}
.input3{
	width:30%;
	height:30px;
	line-height:30px;
	vertical-align:middle;
}
.input_css{
	width:80px;
	height:30px;
	line-height:30px;
	vertical-align:middle;
}
.select1{
	width: 196px;
    height: 30px;
}
.select2{
    height: 30px;
}
.acss:hover{
	background: #fff;
}
.promptBox{display:inline-block;height:30px;padding-left:5px;width:160px;white-space:nowrap; z-index:50; position:relative;}
.tips-errow{background-position:-296px -22px;color:#f52c2c;}
.tips-ok{background-position:-296px 14px;color:#666;}
.tipsCur{background-position:-296px -55px;color:#666;}
.approveDiv{float:right;color:blue;margin-right:10px;}
#dataListId td{
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

</style>
<script type="text/javascript">
	$(function(){
		_changePro('001','province',2);
		$("input[name='isFree']").change(function(){
			if(this.value=='1') $(".isFreeCss").hide();
			else{
				 $(".isFreeCss").show();
				 _setFree();
			}
		});
		var isFree = $("input[name='isFree']:checked").val();
		if("1"==isFree) $(".isFreeCss").hide();
		else $(".isFreeCss").show();
		$("input[name='priceType']").change(function(){
			if(this.value=='1') $(".type_css").html("件");
			else $(".type_css").html("元");
		});
		var priceType = $("input[name='priceType']:checked").val();
		if(priceType=='1') $(".type_css").html("件");
		else $(".type_css").html("元");
		
		$("#setFreeFlag").click(function(){
			_setFree();
		});
		_setFree();
		_search();
	});

	function _setFree(){
		var flag = $("#setFreeFlag").is(':checked');
		if(flag == true){
			$("#setFree").val("1");
			$(".item_css").css("display","block");
			_reHeight("rightFrame","contentDiv");
		}else{
			$("#setFree").val("0");
			$(".item_css").css("display","none");
		}
	}
	
	function save(){
		//if(_checkAllReady()){
			$.ajax({
	              cache: true,
	              type: "POST",
	              url:'<%=path%>/shippingTemplate/save.do',
	              data:$('#fm').serialize(),
	              dataType:"text",
	              error: function(request) {
	            	  parent.layer.alert("保存失败，请检查数据后再次保存");
	              },
	              success: function(data) {
	                var msg = data;
	                if(msg=="T"){
	                    	window.location.href = '<%=path %>/shippingTemplate/toShippingTemplateListPage.do';
					}else {
						parent.layer.alert("保存失败，请检查数据后再次保存");
					}
	              }
	         });
		//}
	}

	function _changePro(val,id,level){
		$("."+id+"Css").empty();
		$("."+id+"Css").hide();
		var obj = "";
		$.ajax({
              cache: true,
              type: "POST",
              url:'<%=path%>/shippingTemplate/queryProvinceCityList.do',
              data:{areaPcode : val,level:level},
              async: false,
              dataType : 'json',
              error: function(request) {
              },
              success: function(data) {
              	 if(data){
              	 	var list = data;
              	 	if(list.length>0){
						for(var i =0 ;i<list.length;i++){
							var info = list[i];
							var AREA_NAME = info.AREA_NAME;
							var AREA_CODE = info.AREA_CODE;
							$("#"+id).append("<option value='"+AREA_CODE+"'>"+AREA_NAME+"</option>");
							if(i==0) obj=AREA_CODE;
						}
						$("#"+id).show();
					}
              	 }
              }
        });
		if(level==2) _changePro(obj,"city",3);
		if(level==3) _changePro(obj,"cityArea",4);
	}

	var pagination;                         
	function _search() {
		var url = "<%=path%>/shippingTemplate/queryItemList.do";
		var data = {
			uuid:$("#uuid").val()
		};
		pagination = _initPagination({'pageId':'pagination','cKey':'shippingTemplateItem', 'url': url, 'data': data, 'rows': 5, 'callback':_initDataList});
	}

	function _initDataList(data) {
 		var d = data.rows;
 		var total = data.total;
		var str = "";
		$("#dataList").empty();
		var numStr = "0";
		for(var i=0;i<d.length;i++){
			var len = d[i].PID;
			numStr+=","+len;
			str += "<tr class='trCss' id='num"+len+"' style='border-right: 1px solid #ddd;'>";
			str += "    <td style='text-align:center;'>"+len+"</td>";
			str += "    <td style='text-align:center;'>";
			str += "    	<select class='select2' id='priceType"+len+"' name='priceType"+len+"' onchange='_changeT(\""+len+"\")'>";
			str += "    		<option value='1' "+(d[i].PRICE_TYPE==1 ? "selected='selected'":"")+">按件数</option>";
			str += "    		<option value='2' "+(d[i].PRICE_TYPE==2 ? "selected='selected'":"")+">按金额</option>";
			str += "    	</select>";
			str += "    </td>";
			str += "    <td style='text-align:left;'>";
			str += "    	<input class='input3' id='typeLimit"+len+"' name='typeLimit"+len+"' onkeyup='_verifyNum(this.id)' value='"+d[i].TYPE_LIMIT+"'/>&nbsp;<em id='ptId"+len+"'>"+(d[i].PRICE_TYPE==1 ?"件":"元")+"</em>";
			str += "    </td>";
			str += "    <td style='text-align:center;'>";
			str += "    	<select class='select2' id='status"+len+"' name='status"+len+"'>";
			str += "    		<option value='1' "+(d[i].STATUS==1 ? "selected='selected'":"")+">启用</option>";
			str += "    		<option value='0' "+(d[i].STATUS==0 ? "selected='selected'":"")+">禁用</option>";
			str += "    	</select>";
			str += "    </td>";
			str += "    <td style='text-align:center;'><a onclick=\"_del('"+len+"')\" class=\"btn btn-primary\" style=\"text-decoration:none;\">删除</a></td>";
			str +=" </tr>";
		}
		$("#dataListId").append(str);
		$("#numStr").val(numStr);
		_reHeight("rightFrame","contentDiv");
		
	}

	function _addItem(){
		var len = $(".trCss").length+1;
		var str = "<tr class='trCss' id='num"+len+"' style='border-right: 1px solid #ddd;'>";
		str += "    <td style='text-align:center;'>"+len+"</td>";
		str += "    <td style='text-align:center;'>";
		str += "    	<select class='select2' id='priceType"+len+"' name='priceType"+len+"' onchange='_changeT(\""+len+"\")'>";
		str += "    		<option value='1'>按件数</option>";
		str += "    		<option value='2'>按金额</option>";
		str += "    	</select>";
		str += "    </td>";
		str += "    <td style='text-align:left;'><input class='input3' onkeyup='_verifyNum(this.id)' id='typeLimit"+len+"' name='typeLimit"+len+"'/>&nbsp;<em id='ptId"+len+"'>件</em></td>";
		str += "    <td style='text-align:center;'>";
		str += "    	<select class='select2' id='status"+len+"' name='status"+len+"'>";
		str += "    		<option value='1'>启用</option>";
		str += "    		<option value='0'>禁用</option>";
		str += "    	</select>";
		str += "    </td>";
		str += "    <td style='text-align:center;'><a onclick=\"_del('"+len+"')\" class=\"btn btn-primary\" style=\"text-decoration:none;\">删除</a></td>";
		str +=" </tr>";
		$("#dataListId").append(str);
		var numStr = $("#numStr").val();
		numStr+=","+len;
		$("#numStr").val(numStr);
		_reHeight("rightFrame","contentDiv");
	}

	function _del(val){
		$("#num"+val).remove();
		var numStr = $("#numStr").val();
		numStr = numStr.replace(","+val,"");
	}

	function _changeT(num){
		var priceType = $("#priceType"+num).val();
		if(priceType=="1") $("#ptId"+num).html("件");
		else $("#ptId"+num).html("元");
	}

	function _verifyNum(id){
		var str = $("#"+id).val();
		var len = str.length;
		for(var i=len;i>0;i--){
			var v = str.substr(i-1,1);
			if(v<"0"||v>"9") $("#"+id).val(str.substr(0,i-1));
		}
	}

</script>
</head>
<body style="font-family: '微软雅黑'">
	<div id="contentDiv" style="padding:5px; width:99%;margin: 0px;">
		<div style="width:100%;height:30px;border-bottom:1px solid #ADADAD;">
			<div class="toptil"><c:if test="${bean.TEMPLATE_ID == null }">新增</c:if><c:if test="${bean.TEMPLATE_ID != null }">编辑</c:if>运费模板</div>
	 		<div id="approveDiv" class="approveDiv">
	 		</div>
		</div>
		<form id="fm" name="fm" class="form-horizontal form-validate" method="post" action="" novalidate="novalidate">
			<input type="hidden" id="uuid" name="uuid" value="${bean.TEMPLATE_ID }">
			<input type="hidden" id="setFree" name="setFree" value="0">
			<input type="hidden" id="numStr" name="numStr" value="0">
			<div style="width:100%;margin-top:20px;margin-left:10px;">
				<table style="width:100%;">
					<tr class="tr_css">
						<td class="td1" nowrap>模板名称：</td>
						<td class="rightTd" nowrap>
							<input class="input1" id="tempName" name="tempName" value="${bean.TEMP_NAME }">
							<div class="promptBox">
	                       		<div class='tips-errow' style="display:none;">模板名称已存在</div>
	                       		<div class='tips-ok' style="display:none;"></div>
	                       		<div class='tipsCur' style="display:none;">请输入模板名称</div>
	                       	</div>
						</td>
					</tr>
					<tr class="tr_css">
						<td class="td1" style="vertical-align:top;white-space: nowrap;">宝贝地址：</td>
						<td class="rightTd">
							<input id="country" name="country" type="hidden" value="001">
							<select class="select2" id="country1" name="country1" disabled="disabled" onchange="_changePro(this.value,'province',2)">
								<option value="">---请选择---</option>
								<c:forEach items="${countryList}" var="country" > 
									<option value="${country.AREA_CODE }" <c:if test="${country.AREA_CODE eq '001'}">selected="selected"</c:if>>${country.AREA_NAME }</option>
								</c:forEach>
							</select>
							<select class="select2 provinceCss" id="province" name="province" <c:if test="${fn:length(provinceList) eq 0}">style="display:none;"</c:if> onchange="_changePro(this.value,'city',3)">
								<c:forEach items="${provinceList}" var="province" > 
									<option value="${province.AREA_CODE }" <c:if test="${province.AREA_CODE eq bean.PROVINCE}">selected="selected"</c:if>>${province.AREA_NAME }</option>
								</c:forEach>
							</select>
							<select class="select2 provinceCss cityCss" id="city" name="city" <c:if test="${fn:length(cityList) eq 0}">style="display:none;"</c:if> onchange="_changePro(this.value,'cityArea',4)">
								<c:forEach items="${cityList}" var="city" > 
									<option value="${city.AREA_CODE }" <c:if test="${city.AREA_CODE eq bean.CITY}">selected="selected"</c:if>>${city.AREA_NAME }</option>
								</c:forEach>
							</select>
							<select class="select2 provinceCss cityCss cityAreaCss" id="cityArea" name="cityArea" <c:if test="${fn:length(cityAreaList) eq 0}">style="display:none;"</c:if>>
								<c:forEach items="${cityAreaList}" var="cityArea" > 
									<option value="${cityArea.AREA_CODE }" <c:if test="${cityArea.AREA_CODE eq bean.CITY_AREA}">selected="selected"</c:if>>${cityArea.AREA_NAME }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr class="tr_css">
						<td class="td1" style="vertical-align:top;white-space: nowrap;">发货时间：</td>
						<td class="rightTd" nowrap>
							<select class="select2" id="deliveryTime" name="deliveryTime">
								<option value="">---请选择---</option>
								<c:forEach items="${timeList}" var="time" > 
									<option value="${time.VIEW_CODE }" <c:if test="${time.VIEW_CODE eq bean.DELIVERY_TIME}">selected="selected"</c:if>>${time.CODE_NAME }</option>
								</c:forEach>
							</select>
							<br>
							<em style="font-size: 12px;color: #777">如实设定宝贝的发货时间，不仅可避免发货纠纷，还能促进成交</em>
						</td>
					</tr>
					<tr class="tr_css">
						<td class="td1" nowrap style="vertical-align:top;">是否包邮：</td>
						<td class="rightTd" nowrap>
							<input type="radio" name="isFree" value="1" <c:if test="${bean.IS_FREE eq 1 }">checked</c:if> />是&nbsp;
							<input type="radio" name="isFree" value="0" <c:if test="${bean.IS_FREE eq null or bean.IS_FREE eq 0 }">checked</c:if> />否&nbsp;
						</td>
					</tr>
					<tr class="tr_css isFreeCss" >
						<td class="td1" nowrap style="vertical-align:top;">计价方式：</td>
						<td class="rightTd" nowrap>
							<input type="radio" name="priceType" value="1" <c:if test="${bean.PRICE_TYPE eq null or bean.PRICE_TYPE eq 1}">checked</c:if> />按件数&nbsp;
							<input type="radio" name="priceType" value="2" <c:if test="${bean.PRICE_TYPE eq 2 }">checked</c:if> />按金额&nbsp;
						</td>
					</tr>
					<tr class="tr_css isFreeCss">
						<td class="td1" nowrap style="vertical-align:top;">运送方式：</td>
						<td class="rightTd" nowrap>
							<table>
								<tr style="margin: 0px;" nowrap>
									<td>默认运费&nbsp;&nbsp;</td>
									<td><input class="input_css" id="defaultLimit" name="defaultLimit" value="${bean.DEFAULT_LIMIT }"/>&nbsp;&nbsp;<em class="type_css">件</em></td>
									<td><em style="color: #fff">，增加运</em>内&nbsp;&nbsp;<input class="input_css" id="defaultCost" name="defaultCost" value="${bean.DEFAULT_COST }"/>&nbsp;&nbsp;元，</td>
								</tr>
								<tr style="line-height: 45px;" nowrap>
									<td>每 增 加&nbsp;&nbsp;</td>
									<td><input class="input_css" id="stepLimit" name="stepLimit" value="${bean.STEP_LIMIT }"/>&nbsp;&nbsp;<em class="type_css">件</em></td>
									<td>，增加运费&nbsp;&nbsp;<input class="input_css" id="stepCost" name="stepCost" value="${bean.STEP_COST }"/>&nbsp;&nbsp;元</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr class="tr_css isFreeCss" style="margin-top: -10px;">
						<td class="td1" nowrap style="vertical-align:top;">指定包邮条件：</td>
						<td class="rightTd" nowrap style="width: 100%;padding-top: 10px;">
							<input id="setFreeFlag" name="setFreeFlag" type="checkbox" <c:if test="${bean.SET_FREE eq 1}">checked="checked"</c:if>/>
						</td>
					</tr>
					<tr class="tr_css isFreeCss item_css" style="display: none;">
						<td class="td1" nowrap style="vertical-align:top;">&nbsp;</td>
						<td class="rightTd" nowrap style="width: 100%">
							<table id="dataListId" style="border-spacing: 0;width: 85%;">
								<tr class="trBgd" style="margin:0px;background-color: #eee;text-align: center; height: 31px;
									border: 1px solid #ddd; line-height: 30px; font-weight: bold;white-space: nowrap;">
									<td style="width: 5%">序号</td>
									<td style="width: 10%">计价方式</td>
									<td style="width: 20%">免邮条件</td>
									<td style="width: 10%">状态</td>
									<td style="width: 10%">操作</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr class="tr_css isFreeCss item_css" style="display: none;">
						<td class="td1" nowrap style="vertical-align:top;">&nbsp;</td>
						<td class="rightTd" nowrap>
							<div id="btnDiv">
								<a onclick="_addItem()" class="btn btn-primary" style="text-decoration:none;">+增加</a>
							</div>
						</td>
					</tr>
					<tr class="tr_css">
						<td class="td1" style="vertical-align:top;white-space: nowrap;">状态：</td>
						<td class="rightTd">
							<select class="select2" id="status" name="status">
								<option value="1" <c:if test="${bean.STATUS eq 1 }">selected="selected"</c:if>>启用</option>
								<option value="0" <c:if test="${bean.STATUS eq null or bean.STATUS eq 0}">selected="selected"</c:if>>禁用</option>
							</select>
						</td>
					</tr>
					<tr class="tr_css">
						<td class="td1">&nbsp;</td>
						<td style="">
							<div id="btnDiv">
								<a onclick="save();" class="btn btn-primary" style="text-decoration:none;">保存</a>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		_reHeight();
	});
	function _reHeight(){
		var main = $(window.parent.document).find("#rightFrame");
		var mainheight = $("#contentDiv").height();
		main.height(mainheight);
	}
</script>
</html>
